<template>
  <div style="background: white">
    <div class="my-header">
      <strong>餐饮登录</strong>
    </div>
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <div class="loginbtn">
      <mt-button type="primary" style="width: 90%" @click="login">登录</mt-button>
    </div>
    <router-link to="/changepw">
      <span class="changepw">修改密码</span>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        username: "",
        password: "",
      }
    },
    methods: {
      //保存信息
      saveInfo(token,userNick) {
        localStorage.setItem("token",token);
        localStorage.setItem("userNick",userNick);
        console.log("111111111" + token);

      },
      login() {
        if (this.username === "") {
          this.$myUtils.bottomToast("账号不能为空");
          return
        }
        if (this.password === "") {
          this.$myUtils.bottomToast("密码不能为空");
          return
        }
        console.log("账号：" + this.username + "密码：" + this.password)
        // //这种参数包装ie浏览器接不到参数
        // let param = new URLSearchParams();
        // param.append('key', '52a4b8a337f42dd376661f8b61c7ba6d');
        //包装数据 传给后台是key:value，不知道为啥不包装传给后台的json字符串{key:"xxx"}
        let postData = this.$qs.stringify({
          username: this.usename,
          password: this.password,
        });
        //请求网络登录
        this.$axios.get(this.$apis.login, postData
        ).then(res => {
          console.log(res);
          if (res.data.code === 1) {
            //登录成功
            this.$router.push(("/homeNew"));
            let token = res.data.data.token;
            let userNick = res.data.data.userNick;
            this.saveInfo(token,userNick);
          } else {
            //弹错误提示
            this.$myUtils.bottomToast(res.data.msg)
          }
        })
          .catch(error => {
            this.$myUtils.bottomToast(error)
          })
      },
    }
  }
</script>

<style scoped>
  .my-header {
    display: flex;
    padding: 10px;
    background: #fff;
    font-size: 16px;
  @include flexbox(space-between, center, row, nowrap);
    margin-bottom: 20px;
  }

  .loginbtn {
    margin: 30px 0;
    width: 100%;
    text-align: center;
  }

  .changepw {
    clear: both;
    float: right;
    font-size: 15px;
    color: #81838e;
    margin-right: .5rem;
  }

</style>
